<!-- 个人信息 -->
<template>
    <div style="background-color: #EFF1F2;padding: 12px 0;">
        <!-- session01 -->
        <div style="display: flex; background-color: white;padding: 12px 40px;border-radius: 8px;">
            <!-- 头像 -->
            <div style="display: flex;flex-direction: column;align-items: center;">
                <div style="width: 150px;height: 200px;position: relative;">
                  <el-upload
                    class="avatar-uploader"
                    action="http://47.103.2.155:8801/api/File/upload"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    :file-list="avatarList"
                  >
                    <img v-if="userInfo.avatar" :src="userInfo.avatar" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <!-- <el-image style="width: 150px;height: 200px;" :src="userInfo.avatar"></el-image> -->
                    <!-- <img style="width: 25px;height: 25px;position: absolute;bottom: 0;left: 0;background-color: green;" /> -->
                </div>
                <div style="margin-top: 12px;display: flex;">
                    <div style="font-size: 14px;">保证金:</div>
                    <div style="font-size: 14px; text-decoration: underline; color: #1890ff;">未缴纳</div>
                </div>
            </div>
            <!-- line -->
            <div style="width: 2px;background-color: #E9E9E9;margin: 0 40px;"></div>

            <!-- main -->
            <div style="flex: 3;">
                <div style="font-size: 35px;margin-top: 20px;">{{ userInfo.username }}</div>
                
                <div style="display: flex;">
                    <div style="flex: 1;display: flex;flex-direction: column;">
                        <div style="display: flex;align-items: center;margin-top: 12px;">
                            <img style="width: 26px;height: 23px;margin-right: 12px;" src="http://admin.api.moyangjia.top/static/picture/1690955037365-4vt7.png"/>
                            <div style="font-size: 14px;">身份类型:</div>
                            <input v-if="isEdit" v-model="userInfo.roleType" />
                            <div v-if="!isEdit" style="font-size: 14px;margin-left: 20px;font-weight: bold;">{{ userInfo.roleType }}</div>
                        </div>
                    
                        <div style="display: flex;align-items: center;margin-top: 12px;">
                            <img style="width: 23px;height: 23px;margin-right: 12px;" src="http://admin.api.moyangjia.top/static/picture/1690955071607-u1cp.png"/>
                            <div style="font-size: 14px;">年龄:</div>
                            <input v-if="isEdit" v-model="userInfo.age" />
                            <div v-if="!isEdit" style="font-size: 14px;margin-left: 20px;font-weight: bold;">{{ userInfo.age }}</div>
                        </div>
                    
                        <div style="display: flex;align-items: center;margin-top: 12px;">
                            <img style="width: 23px;height: 23px;margin-right: 12px;" src="http://admin.api.moyangjia.top/static/picture/1690955092238-h35s.png"/>
                            <div style="font-size: 14px;">性别:</div>
                            <input v-if="isEdit" v-model="userInfo.sex" />
                            <div v-if="!isEdit" style="font-size: 14px;margin-left: 20px;font-weight: bold;">{{ userInfo.sex }}</div>
                        </div>
                    </div>

                    <div style="flex: 1;">
                        <div style="display: flex;margin-top: 12px;">
                            <img style="width: 23px;height: 23px;margin-right: 12px;" src="http://admin.api.moyangjia.top/static/picture/1690955118351-opyv.png"/>
                            <div style="font-size: 14px;">手机号:</div>
                            <input v-if="isEdit" v-model="userInfo.mobile" />
                            <div v-if="!isEdit" style="font-size: 14px;margin-left: 20px;font-weight: bold;">{{ userInfo.mobile }}</div>
                        </div>
                        
                        <div style="display: flex;margin-top: 12px;">
                            <img style="width: 23px;height: 23px;margin-right: 12px;" src="http://admin.api.moyangjia.top/static/picture/1690955138828-au1i.png"/>
                            <div style="font-size: 14px;">详细地址:</div>
                            <input v-if="isEdit" v-model="userInfo.address" />
                            <div v-if="!isEdit" style="font-size: 14px;margin-left: 20px;font-weight: bold;flex:1;">{{ userInfo.address }}</div>
                        </div>
                    </div>
                  
                    <div style="display: flex;flex-direction: column;align-items: center;">
                        <div style="font-size: 14px;color: #666666;">企业二维码</div>
                        <el-upload
                          class="avatar-uploader-qrcode"
                          action="http://47.103.2.155:8801/api/File/upload"
                          :show-file-list="false"
                          :on-success="handleQrcodeSuccess"
                          :before-upload="beforeAvatarUpload"
                          :file-list="qrcodeList"
                          style="margin-top: 20px;"
                        >
                          <img v-if="userInfo.bizQrcode" :src="userInfo.bizQrcode" class="avatar-qrcode">
                          <i v-else class="el-icon-plus avatar-uploader-icon-qrcode"></i>
                        </el-upload>
                        <div style="display: flex;margin-top: 20px;">
                            <el-button type="success" @click="onEditUserInfo">{{ isEdit ? '保存个人信息' : '修改个人信息' }}</el-button>
                        </div>
                    </div>

                </div>


            </div>

            <!-- line -->
            <div style="width: 2px;background-color: #E9E9E9;margin: 0 40px;"></div>

            <div style="flex-direction: column;display: flex;justify-content: center;align-items: center;">
                <div style="font-size: 13px;color: #666666;margin-bottom: 30px;">钱包可用余额（元）</div>
                <div style="font-size: 30px;color: #222222;margin-bottom: 30px;">{{ userInfo.earnCount }}</div>
                <div style="display: flex;">
                    <el-button type="primary" @click="onOpenWallet">查看</el-button>
                </div>
            </div>
        </div>


        <!-- session02 -->
        <div style="margin-top: 12px;">
            <div style="display: flex;align-items: stretch;">
                <!-- left -->
                <div style="flex: 1;margin-right: 12px;background-color: white;padding: 12px;">
                    <!-- title -->
                    <div style="font-size: 18px;">接单类型：</div>
                    <!-- body -->
                    <div style="margin-top: 12px;">
                        <div class="kind_list">
                          <div v-for="(types, index) in kindTypeList" :key="index">
                            <div class="kind_list_title">{{ types['name'] }}</div>
                            <el-checkbox-group v-model="orderTypeList[index]">
                                <el-checkbox v-for="(item,idx) in types.subList" :key="idx" :label="item">
                                    <div style="display: flex;flex-direction: column;align-items: center;">
                                        <el-image style="width: 26px;height: 26px;" :src="types.icon"></el-image>
                                        <div style="font-size: 14px;color: #666666;">{{item}}</div>
                                    </div>
                                </el-checkbox>
                            </el-checkbox-group>
                          </div>
                        </div>
                        <div style="font-size: 13px;padding-top: 12px;color: #666666;">（其余不可选择接单类型则需要上传相关的技能资质证书后方可选择）</div>
                    </div>
                </div>

                <!-- mid -->
                <div style="flex: 1;margin-right: 12px;background-color: white;padding: 12px;">
                    <!-- title -->
                    <div style="font-size: 18px;">我的技能:</div>
                    <!-- body -->
                    <div style="margin-top: 12px;">
                        <div style="overflow-y: auto;height: 230px;">
                            <!-- item -->
                            <div class="skill_stype" v-for="(item,idx) in settingInfo.skillTypes" :key="idx">
                                <el-checkbox style="flex: 1;" v-model="skillCheckList[idx]">{{ item['name'] }}</el-checkbox>
                                <div class="skill_desc" style="flex: 1;" :underline="false">{{ item.note }}</div>
                                <el-upload
                                  action="http://47.103.2.155:8801/api/File/upload"
                                  name="file"
                                  :on-success="(obj,file,list) => onUploadCert(obj,file,list,item)"
                                >
                                  <el-link type="primary" style="text-decoration: underline;flex:1" :underline="false">{{handleSkillTypeExtend(item.extendList)}}</el-link>
                                </el-upload>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- right -->
                <div style="flex: 1;margin-right: 12px;background-color: white;padding: 12px;">
                    <!-- title -->
                    <div style="font-size: 18px;">我的证书:</div>
                    <!-- body -->
                    <div style="margin-top: 12px;">
                        <div style="overflow-y: auto;height: 230px;display: flex;flex-wrap: wrap;">
                            <!-- item -->
                            <div style="margin-right: 12px;margin-top: 12px;display: flex;flex-direction: column;align-items: center;" v-for="(item,idx) in mySkillCertList" :key="idx">
                                <el-image style="width: 160px;height: 100px;border-radius: 8px;" :src="item.value"></el-image>
                                <div class="cert_card_text">{{ item.name }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog
          title="钱包详情"
          :visible.sync="dialogVisible"
          width="60%"
          :before-close="handleClose"
        >
          <walletDetail :amountMoney="amountMoney" :currUserId="currUserId" :userInfo="userInfo"/>
        </el-dialog>
    </div>
</template>
  
<script>
import { getYzSettingList } from '@/api/sysDict';
import { queryUserMasterInfo, saveUserMasterInfo } from '@/api/yzUser';
import { getListYzKind } from '@/api/yzKind';
import walletDetail from './walletDetail';

export default {
  components: {
    walletDetail
  },
  data() {
    return {
      currUserId: '',
      settingInfo: {},
      userInfo: {},
      avatarList: [],
      qrcodeList: [],
      isEdit: false,
      dialogVisible: false,
      amountMoney: 0,
      kindTypeList: [],
      skillCheckList: [],
      mySkillCertList: [],
      orderTypeList: [],
    }
  },
  async mounted() {
    const userInfo = sessionStorage.getItem('userInfo');
    const userId = JSON.parse(userInfo)['id'];
    this.currUserId = userId;
    await this.getSettingInfo();
    // 接单类型
    await this.getOrderType();
    await this.getPersonalInfo();
  },
  methods: {
    // 设置信息
    async getSettingInfo() {
      const { data } = await getYzSettingList();
      if (data.code === 200) {
        this.settingInfo = data.data[0] || {};
      } else {
        this.$message({
          message: data.msg || '设置信息获取失败',
          type: 'error',
          showClose: true,
          duration: 3000,
        });
      }
    },
    // 个人信息
    async getPersonalInfo() {
      const { data } = await queryUserMasterInfo(this.currUserId);
      if (data.code === 200) {
        this.userInfo = data.data || {};
        this.amountMoney = this.userInfo.earnCount;
        this.avatarList = [{ name: 'avatar', url: this.userInfo.avatar }]
        this.qrcodeList = [{ name: 'qrcode', url: this.userInfo.bizQrcode }]
        this.handleOrderTakeType(this.userInfo);
        this.handleSkillCheckbox(this.userInfo);
        this.handleCertList(this.userInfo)
      } else {
        this.$message({
          message: data.msg || '个人信息获取失败',
          type: 'error',
          showClose: true,
          duration: 3000,
        });
      }
    },
    async onEditUserInfo() {
      if (this.isEdit) {
        // 保存个人信息
        const params = { ...this.userInfo };
        const strList = this.orderTypeList.map(item => {
          return item.join(',')
        })
        params.orderTakeType = strList.join(',');
        let currSkillStr = '';
        this.skillCheckList.map((item, index) => {
          if (item) {
            currSkillStr += this.settingInfo.skillTypes[index].name + ','
          }
        })
        currSkillStr = currSkillStr.slice(0, -1);
        params.skillType = currSkillStr;
        params.certList = JSON.stringify(this.mySkillCertList);
        // console.log('params', params)
        const { data } = await saveUserMasterInfo(params);
        if (data.code === 200) {
          this.$message({
            message: data.msg || '个人信息保存成功',
            type: 'success',
          });
        } else {
          this.$message({
            message: data.msg || '个人信息保存失败',
            type: 'error',
            showClose: true,
            duration: 3000,
          });
        }
      }
      this.isEdit = !this.isEdit;
    },
    handleAvatarSuccess(res, file) {
      this.userInfo.avatar = res.data.fileUrl || URL.createObjectURL(file.raw);
      this.avatarList = [{ name: 'avatar', url: this.userInfo.avatar }]
    },
    handleQrcodeSuccess(res, file) {
      this.userInfo.bizQrcode = res.data.fileUrl || URL.createObjectURL(file.raw);
      this.qrcodeList = [{ name: 'avatar', url: this.userInfo.bizQrcode }]
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
    },
    onOpenWallet() {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    // 接单类型
    async getOrderType() {
      const { data } = await getListYzKind({});
      if (data.code === 200) {
        this.kindTypeList = data.data || [];
        this.kindTypeList = this.kindTypeList.map(item => {
          return { ...item, checkbox: [] }
        })
        this.handleOrderTypeData()
      } else {
        this.$message({
          message: data.msg || '信息获取失败',
          type: 'error',
          showClose: true,
          duration: 3000,
        });
      }
    },
    // 处理接单类型数据
    handleOrderTypeData() {
      this.kindTypeList = this.kindTypeList.map(item => {
        const currSubList = [];
        Array.isArray(this.settingInfo.roleTypes) && this.settingInfo.roleTypes.map(ele => {
          const list = ele.extendList || [];
          if (list.includes(item['name'])) {
            currSubList.push(ele['name'])
          }
        })
        return { ...item, subList: currSubList }
      })
    },
    handleSkillTypeExtend(extendList) {
      return extendList && extendList.join(',')
    },
    handleSkillCheckbox(userInfo) {
      this.skillCheckList = Array.isArray(this.settingInfo.skillTypes) && this.settingInfo.skillTypes.map(item => {
        const userSkillList = this.getStringList(userInfo.skillType);
        if (userSkillList && userSkillList.includes(item['name'])) {
          return true;
        }
        return false;
      })
    },
    handleOrderTakeType(userInfo) {
      const takeOrderType = this.getStringList(userInfo.orderTakeType);
      this.kindTypeList = this.kindTypeList.map((item, k) => {
        const list = item.subList;
        this.orderTypeList[k] = [];
        list.map((ele, i) => {
          if (takeOrderType.includes(ele)) {
            this.orderTypeList[k].push(ele);
            item.checkbox[i] = ele;
          }
        })
        return { ...item }
      })
      // console.log('this.kindTypeList', this.kindTypeList)
    },
    handleCertList(userInfo) {
      const list = userInfo.certList && typeof userInfo.certList === 'string' ? JSON.parse(userInfo.certList) : [];
      this.mySkillCertList = list;
    },
    getStringList(str) {
      if (str && typeof str === 'string') {
        return str.split(',')
      }
      return []
    },
    onUploadCert(obj,res,file,item){
      if (obj.code == 200) {
        this.$message.success({dangerouslyUseHTMLString: true, message: obj.msg})
        this.handleImageList(obj, item)
      } else {
        this.$message.error('操作失败')
      }
    },
    handleImageList(obj, item) {
      const params = { name: item.name, value: obj.data.fileUrl || '' }
      if (this.mySkillCertList.length) {
        const currList = this.mySkillCertList.find(k => k.name === params.name);
        if (currList) {
          this.mySkillCertList = this.mySkillCertList.map(ele => {
            if (ele.name === item.name) {
              return params;
            }
            return { ...ele }
          })
        } else {
          this.mySkillCertList.push(params)
        }
      } else {
        this.mySkillCertList.push(params)
      }
    },
  }
}
</script>
  
<style>
.deleteBorder .el-tabs__nav-wrap::after{
  height: 0;
}
.avatar-uploader .el-upload, .avatar-uploader-qrcode .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover, .avatar-uploader-qrcode .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 200px;
  line-height: 200px;
  text-align: center;
}
.avatar-uploader-icon-qrcode {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 200px;
  display: block;
}
.avatar-qrcode {
  width: 80px;
  height: 80px;
  display: block;
}
.kind_list {
  padding: 10px;
  overflow-y: auto;
  height: 200px;
  border: 1px solid #eee;
  border-radius: 10px;
}
.kind_list_title {
  margin-top: 10px;
  margin-bottom: 10px;
  color: #696868;
}
.skill_stype {
  display: flex;
  margin: 8px 0px;
}
.skill_desc {
  font-size: 14px;
  color: #1890ff;
}
.skill_stype div {
  flex: 1;
  text-align: center;
}
.cert_card_text {
  text-align: center;
  font-size: 14px;
  color: #1890ff;
}
</style>
  